﻿<common:LayoutAwarePage x:Class="OurDailyBread.MainPage"
                        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                        xmlns:UI="using:Microsoft.Advertising.WinRT.UI"
                        xmlns:common="using:OurDailyBread.Common"
                        xmlns:ignore="http://www.ignore.com"
                        mc:Ignorable="d ignore"
                        d:DesignHeight="768"
                        d:DesignWidth="1366"
                        DataContext="{Binding Main, Source={StaticResource Locator}}">

    <Page.Resources>
        <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
        <x:String x:Key="AppName">Our Daily Bread</x:String>
    </Page.Resources>
    
    <Page.BottomAppBar>
        <AppBar x:Name="bottomAppBar" Padding="10,0,10,0">
            <Grid>
                <StackPanel x:Name="AppBarLeftPanel" Orientation="Horizontal" HorizontalAlignment="Left">
                    <Button x:Name="RemoveButton" Style="{StaticResource RemoveAppBarButtonStyle}" Command="{Binding RemoveCommand, Mode=OneWay}" Visibility="Collapsed"/>

                    <!--     <Button AutomationProperties.Name="Home" Name="Home" HorizontalAlignment="Left" Margin="20, 0, 0, 0" BorderThickness="0" Command="{Binding HomeCommand, Mode=OneWay}">
                        <Image Source="Assets/home.png"/>
                    </Button>
                    <Button AutomationProperties.Name="Back" Name="Back" HorizontalAlignment="Left" Margin="150, 0, 0, 0" BorderThickness="0" Command="{Binding PrevCommand, Mode=OneWay}">
                        <Image Source="Assets/Back.png"/>
                    </Button>
                    <Button AutomationProperties.Name="Next" Name="Next" HorizontalAlignment="Left" Margin="250, 0, 0, 0" BorderThickness="0" Command="{Binding NextCommand, Mode=OneWay}" >
                        <Image Source="Assets/Next.png"/>
                    </Button>-->
                </StackPanel>
                <StackPanel x:Name="AppBarRightPanel" Orientation="Horizontal" HorizontalAlignment="Right">
                    <Button Style="{StaticResource HomeAppBarButtonStyle}" Command="{Binding HomeCommand, Mode=OneWay}"/>
                    <Button Style="{StaticResource PreviousAppBarButtonStyle}" Command="{Binding PrevCommand, Mode=OneWay}"/>
                    <Button Style="{StaticResource NextAppBarButtonStyle}" Command="{Binding NextCommand, Mode=OneWay}"/>
                    <Rectangle Height="50" Width="2" Fill="LightGray"/>
                    <Button Style="{StaticResource FavoriteAppBarButtonStyle}" Command="{Binding LikeCommand, Mode=OneWay}"/>

                    <!--<Button AutomationProperties.Name="Like" Name="Like" HorizontalAlignment="Right" Margin="0, 0, 20, 0" BorderThickness="0" Command="{Binding LikeCommand, Mode=OneWay}" >
                        <Image Source="{Binding LikeButton}" />
                    </Button>-->
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>
        <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid x:Name="rootgrid" Style="{StaticResource LayoutRootStyle}">

        <ScrollViewer x:Name="scroll" Grid.Row="0" HorizontalScrollMode="Enabled" Style="{StaticResource HorizontalScrollViewerStyle}">
            <Grid x:Name="container" Background="#FF702D0D">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition x:Name="col1" Width="1024" />
                    <ColumnDefinition x:Name="col2" Width="750" />
                    <ColumnDefinition x:Name="col3" Width="750" />
                    <ColumnDefinition x:Name="col4" Width="700" />
                    <ColumnDefinition x:Name="col5" Width="*" />
                </Grid.ColumnDefinitions>

                <Grid x:Name="IntroGrid" Grid.Column="0">
                    <Grid.Background>
                        <ImageBrush ImageSource="{Binding GridImage}" Stretch="UniformToFill"/>
                    </Grid.Background>
                    <StackPanel x:Name="stackPanel" Orientation="Vertical" Background="{StaticResource TransparentBackground}" VerticalAlignment="Bottom" >
                        <Grid Margin="50,20,0,0">
                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                                <TextBlock x:Name="pageTitle" Style="{StaticResource PageHeaderTextStyle}" Text="{Binding BreadTitle}" VerticalAlignment="Top" />
                            </StackPanel>
                            <StackPanel x:Name="InteractionPanel" Orientation="Horizontal" HorizontalAlignment="Right">
                                <TextBlock Style="{StaticResource PageSubheaderTextStyle}" Text="{Binding LikeCount}" Visibility="{Binding LikeCountVisibility}" VerticalAlignment="Top"/>
                                <Image Margin="0,0,50,0" Source="Assets/thumb-up-icon.png" Visibility="{Binding LikeCountVisibility}" VerticalAlignment="Top" Height="30" />
                                <TextBlock Style="{StaticResource PageSubheaderTextStyle}" Visibility="{Binding CommentCountVisibility}" Text="{Binding CommentCount}" VerticalAlignment="Top"/>
                                <Image Margin="0,0,10,0" Source="Assets/comments-add-icon.png" Visibility="{Binding CommentCountVisibility}" Height="30" VerticalAlignment="Top" Width="33"/>
                            </StackPanel>
                        </Grid>
                        <TextBlock x:Name="breadDate" Margin="50,10,0,0" Style="{StaticResource PageSubheaderTextStyle}" Text="{Binding BreadDate}" />
                        <TextBlock x:Name="ShortVerse" Margin="50,10,0,10" Text="{Binding ShortVerse}" TextWrapping="Wrap" FontSize="48" />
                    </StackPanel>
                </Grid>
                <Grid x:Name="bread" Grid.Column="1"  Margin="120,0,0,0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <TextBlock  Style="{StaticResource PageHeaderTextStyle}" Margin="0,30,0,20">
                    	<Run Text="Daily Bread"/>
                    </TextBlock>
                    <ScrollViewer Grid.Row="1">
                        <TextBlock x:Name="BreadText" Text="{Binding BreadText}" 
                                   IsTextSelectionEnabled="True" Margin="0,0,0,30" 
                                   FontSize="32"  TextWrapping="Wrap"/>
                    </ScrollViewer>
                </Grid>
                <Grid x:Name="verse" Grid.Column="2" Margin="120,0,0,0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <TextBlock Style="{StaticResource PageHeaderTextStyle}" Margin="0,30,0,20">
                    	<Run Text="Bible Verses"/>
                    </TextBlock>
                    <TextBlock Grid.Row="1" Style="{StaticResource PageSubheaderTextStyle}" Text="{Binding VerseName}" />
                    <ScrollViewer Grid.Row="2" >
                        <TextBlock x:Name="VerseText" Text="{Binding VerseText}" 
                                   IsTextSelectionEnabled="True"
                                   FontSize="32" Margin="0,0,0,30" TextWrapping="Wrap"/>
                    </ScrollViewer>
                </Grid>
                <Grid x:Name="comments" Grid.Column="3"  Margin="120,0,0,0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <TextBlock Style="{StaticResource PageHeaderTextStyle}" Margin="0,30,0,20">
                    	<Run Text="Comments"/>
                    </TextBlock>
                    <TextBlock Grid.Row="1"  Style="{StaticResource PageSubheaderTextStyle}" Text="{Binding VerseName}" />
                    <StackPanel Grid.Row="2" Orientation="Horizontal" Margin="0,0,0,10">
                        <TextBox x:Name="CommentBox"
                                 Text="{Binding NewComment, Mode=TwoWay}"
                                 Foreground="Gray"
                                 Margin="0,0,10,0" 
                                 Width="500"
                                 Height="70"
                                 GotFocus="CommentBox_GotFocus" 
                                 LostFocus="CommentBox_LostFocus"
                                 TextWrapping="Wrap" />
                        <Button x:Name="CommentButton" TabIndex="1" VerticalAlignment="Center" BorderThickness="0" Command="{Binding AddCommentCommand, Mode=OneWay}" >
                            <Image Source="Assets/comments-add-icon.png" Height="40" />
                        </Button>
                    </StackPanel>
                    <Grid Grid.Row="3">
                        <TextBlock x:Name="MessageBlock" FontSize="13" TextWrapping="Wrap" Text="{Binding CommentMsg}" Visibility="{Binding CommentMsgVisibility}" />
                    </Grid>
                    <Grid Grid.Row="4" >
                        <ListBox x:Name="CommentListBox"  ItemsSource="{Binding CommentList}"
                            ScrollViewer.VerticalScrollBarVisibility="Auto" 
                            Style="{StaticResource ListBoxStyle1}" >
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    <Grid x:Name="Comment" >
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto"/>
                                            <RowDefinition Height="*"/>
                                        </Grid.RowDefinitions>
                                        <TextBlock x:Name="TextBlockComment" Style="{StaticResource BodyTextStyle}" FontSize="16" TextWrapping="Wrap" Text="{Binding CommentText}" />
                                        <StackPanel Grid.Row="1" Orientation="Horizontal">
                                            <TextBlock Foreground="{StaticResource ApplicationForegroundThemeBrush}" Text="posted on" FontSize="13" FontStyle="Italic"/>
                                            <TextBlock x:Name="TexBlockCommentPostTime" Foreground="{StaticResource ApplicationForegroundThemeBrush}" FontSize="13" Text="{Binding CommentTime}" Margin="5,0,0,0" />
                                        </StackPanel>
                                    </Grid>
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>
                    </Grid>
                </Grid>
                <Grid Grid.Column="4" Margin="120,0,0,0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <TextBlock Style="{StaticResource PageHeaderTextStyle}" Margin="0,30,0,20">
                    	<Run Text="My Favorites"/>
                    </TextBlock>
                    <Grid Grid.Row="1">
                        <TextBlock x:Name="LikesGridMessageBlock" FontSize="13" TextWrapping="Wrap" Text="{Binding LikesHelpMsg}" Visibility="{Binding LikesHelpMsgVisibility}" />
                    </Grid>
                    <GridView   x:Name="MyLikesGrid" 
                                Grid.Row="2"
                                CanReorderItems="True" 
                                CanDragItems="True" 
                                ItemsSource="{Binding MyLikeList}" 
                                IsItemClickEnabled="True"
                                ItemClick="MyLikesGrid_ItemClick"
                                SelectionChanged="MyLikeGrid_SelectionChanged"
                                ItemTemplate="{StaticResource ImageOverlayLandingDataTemplate}" >
                        <GridView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapGrid MaximumRowsOrColumns="4" VerticalChildrenAlignment="Top" HorizontalChildrenAlignment="Left" />
                            </ItemsPanelTemplate>
                        </GridView.ItemsPanel>
                    </GridView>
                </Grid>
            </Grid>
        </ScrollViewer>

        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape"/>
                <VisualState x:Name="Filled"/>

                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="IntroGrid">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Double>768</x:Double>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="IntroGrid">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Thickness>-136,0,136,0</Thickness>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!-- The back button and title have different styles when snapped -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="stackPanel">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Thickness>10,30,0,0</Thickness>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="IntroGrid">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Double>320</x:Double>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)" Storyboard.TargetName="IntroGrid">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <HorizontalAlignment>Left</HorizontalAlignment>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="container">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <x:Double>320</x:Double>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ShortVerse" Storyboard.TargetProperty="FontSize">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="20"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InteractionPanel" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</common:LayoutAwarePage>
